<template lang="">
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" class="">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>统计</el-breadcrumb-item>
      <el-breadcrumb-item>视频统计</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <div class="userChart">
        <div ref="firstChart" class="chart-item" :style="{width: '100%', height: '500px'}"></div>
        <div ref="secondChart"  class="chart-item" :style="{width: '100%', height: '500px'}">111</div>
        <div ref="thirdChart"  class="chart-item" :style="{width: '100%', height: '500px'}"></div>
      </div>
    </el-card>

  </div>
</template>
<script>
import { groupbyVideoLocation, groupByVideoLabel, groupByPublicTime } from '@/api/base.js'
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted () {
    this.drawLine()
  },
  methods: {
    async drawLine () {
      const { data: res } = await groupbyVideoLocation()
      const newData = this.objArrtransArr(res.data, '_id', 'count')
      console.log(res)

      const { data: res2 } = await groupByVideoLabel()
      const newData2 = this.objArrtransArr(res2.data, '_id', 'count')

      const { data: res3 } = await groupByPublicTime()
      res3.data.sort(function (a, b) {
        var value1 = new Date(a._id)
        var value2 = new Date(b._id)
        return value1 - value2
      })
      const newData3 = this.objArrtransArr(res3.data, '_id', 'count')
      // 基于准备好的dom，初始化echarts实例
      const firstChart = this.$echarts.init(this.$refs.firstChart)
      const secondChart = this.$echarts.init(this.$refs.secondChart)
      const thirdChart = this.$echarts.init(this.$refs.thirdChart)

      // 绘制图表
      firstChart.setOption({
        title: { text: '视频的地区统计' },
        tooltip: {},
        xAxis: {
          name: '地区',

          data: newData.nameArr
        },
        yAxis: {
          name: '单位:个'
        },
        series: [{
          name: '地区',
          type: 'bar',
          data: newData.numArr
        }]
      })
      // 绘制图表
      secondChart.setOption({
        title: { text: '视频类型统计' },
        tooltip: {},
        legend: { data: ['个数'] },

        xAxis: {
          name: '类型',
          data: newData2.nameArr
        },
        yAxis: {
          name: '单位:个'
        },
        series: [{
          name: '类型',
          type: 'bar',
          data: newData2.numArr
        }]
      })

      thirdChart.setOption({
        title: { text: '视频发布时间统计' },
        tooltip: {},
        legend: { data: ['个数'] },
        xAxis: {
          name: '时间',

          data: newData3.nameArr
        },
        yAxis: {
          name: '单位:个'
        },
        series: [{
          name: '数量',
          type: 'bar',
          data: newData3.numArr
        }]
      })
    },
    objArrtransArr (arr, oldname, oldnum) {
      // nameArr内部存储柱状图y轴名称信息
      var nameArr = []
      // numArr为柱状图serice的data数据
      var numArr = []
      arr.forEach(item => {
        nameArr.push(item[oldname])
        numArr.push(item[oldnum])
      })
      return { nameArr, numArr }
    }
  }
}
</script>
<style lang="less" scoped>
.userChart {
  font-size: 18px;
  display: flex;
  flex-wrap: wrap;
  .chart-item {
    margin-left: 20px;
  }
}
.el-breadcrumb {
  margin-bottom: 15px;
}
</style>
